import React, { FC, FormEvent, useState } from 'react';
import { Button, Form, Input, message, Modal, Radio, RadioChangeEvent, Row, Space, Switch, Tag } from 'antd';
import { _addDict, _addDictData } from '../service';
import { Dict } from '../data';
import { useContext } from 'react';
import { DemoContext } from '..';

export interface AddDictProps {
    item: PartialDict;
    visible: boolean;
    changeVisible: (bool: boolean) => void;
    setReload: () => void;
}
export type PartialDict = Partial<Dict>

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
};

export const AddDict: FC<AddDictProps> = ({ item, visible, changeVisible, setReload }) => {
    const [dict, setDict] = useState<PartialDict>({});
    const add = async () => {
        await _addDict(dict);
        changeVisible(false);
        message.success({
            content: "添加成功！"
        })
        setReload()
    };

    const handleValueChange = (data: PartialDict) => {
        setDict({ ...dict, ...data });
    };

    const handelVideoChange = (e: RadioChangeEvent) => {
        setDict({ ...dict, dictType: e.target.value });
    }

    const removeDictData = (id:string) => {

    }

    const addDicData = () => {
        _addDictData()
    }

    const count = useContext(DemoContext);
    console.log('render');
    return (
        <>
            <Modal
                title='添加字典'
                destroyOnClose
                visible={visible}
                onOk={add}
                onCancel={() => changeVisible(false)}
                maskClosable={false}
            >
                <h1>{count}</h1>
                <Form {...layout} onValuesChange={handleValueChange} initialValues={item}>
                    <Form.Item label="字典名称" name="dictKeyName">
                        <Input />
                    </Form.Item>
                    <Form.Item label="字典key" name="dictKey">
                        <Input />
                    </Form.Item>
                    <Form.Item label="描述" name="description">
                        <Input />
                    </Form.Item>
                    <Form.Item label="字典类型" name="dictType">
                        <Space>
                            <Radio.Group onChange={handelVideoChange} value={item.dictType || dict.dictType}>
                                <Radio value="0">系统</Radio>
                                <Radio value="1">数据</Radio>
                            </Radio.Group>
                        </Space>
                    </Form.Item>
                    {
                        item.items?.length !==0 && <Form.Item label="字典项">
                            <Space size={[10, 10]} wrap>
                                {
                                    item.items?.map(dictData => <Tag closable onClose={()=> removeDictData(dictData.id)} color="#2db7f5" key={dictData.id}>{dictData.dictName}：{dictData.dictVal}</Tag>)
                                }
                            </Space>
                            <Row justify="center"><Button style={{marginTop:20}}>新增字典项</Button></Row>
                        </Form.Item>
                    }
                </Form>
            </Modal>
        </>
    );
};

export default React.memo(AddDict);
